<template>
  <div class="contanter">
    <span>
      <h2 style="display: inline-block">小区管理</h2>
      <span> 用于展示小区列表信息,以及怎增加，修改，删除等操作 </span>
    </span>
    <!-- 卡片一 -->
    <el-card class="box-card">
      <el-row :gutter="15">
        <el-form
          ref="formData"
          :model="formData"
          size="medium"
          label-position="top"
        >
          <el-row type="flex" justify="space-around" align="bottom">
            <el-col :span="15">
              <el-row type="flex" justify="space-around" align="bottom">
                <el-col :offset="2" :span="7">
                  <el-form-item label="小区名称">
                    <el-input
                      v-model="formData.name"
                      size="small"
                      placeholder="请输入"
                      clearable
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="7" :offset="2">
                  <el-form-item label="开发商名称">
                    <el-input
                      v-model="formData.developer"
                      size="small"
                      placeholder="请输入"
                      clearable
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="7" :offset="2">
                  <el-form-item label="物业公司名称">
                    <el-input
                      v-model="formData.estate"
                      size="small"
                      placeholder="请输入"
                      clearable
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :offset="2" :span="7">
                  <el-form-item label="创建时间">
                    <el-date-picker
                      v-model="timeCreate"
                      size="small"
                      type="daterange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :style="{ width: '100%' }"
                      start-placeholder="请选择"
                      end-placeholder="请选择"
                      range-separator="-"
                      :timestamp="true"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4" :offset="5">
              <el-form-item size="large">
                <el-button size="small" @click="resetting()">重置</el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="searchSubmit"
                >查询</el-button>
              </el-form-item>
            </el-col>
          </el-row></el-form>
      </el-row>
    </el-card>
    <!-- 卡片二 -->
    <el-card class="box-card two">
      <!--  -->
      <span style="float: right">
        <el-button
          style="margin-right: 20px"
          type="primary"
          @click="addCom"
        >新增小区</el-button>
        <!-- 刷新 -->
        <el-tooltip content="刷新" placement="top">
          <el-link
            :underline="false"
            style="font-size: 25px"
            icon="el-icon-refresh-right"
            @click="refresh()"
          /></el-tooltip>
      </span>
      <!-- <i style="font-size: 20px" class="el-icon-refresh-right"></i> -->
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="缩略图" width="180">
          <!-- <template v-slot="{ row }">
            <el-image
              style="width: 100px; height: 100px"
<<<<<<< HEAD
              :src="showImgUrl(row.thumb)[0]"
            />
            <!-- :preview-src-list="srcList" -->
          </template>
=======
              :src="showImgUrl(row.thumb)"
              :preview-src-list="srcList"
            />
          </template> -->
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
        </el-table-column>
        <el-table-column prop="name" label="小区名称" width="180" />
        <el-table-column prop="address" label="坐落地址" />
        <el-table-column prop="area" label="占地面积" />
        <el-table-column prop="total_building" label="总栋数" />
        <el-table-column prop="greening_rate" label="绿化率" />
        <el-table-column prop="developer" label="开发商名称" />
        <el-table-column prop="estate" label="物业公司名称" />
        <el-table-column prop="update_time" label="创建时间">
          <template
            v-slot="{ row }"
          >{{ row.update_time | formatDate }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="edit(row.id)">编辑</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <span
          class="demonstration"
        >1-{{ tableData.length }}总共{{ count }}条</span>

        <el-pagination
          :current-page="table.current"
          :page-size="table.pageSize"
          layout="prev, pager, next"
          :total="count"
          @current-change="changeCurrent"
        />
      </div>
    </el-card>
    <!-- 抽屉 -->
    <el-drawer
      ref="drawer"
      size="50%"
      class="drawer"
      title="修改小区"
      :before-close="cancelForm"
      :visible.sync="dialog"
      direction="rtl"
      handle-picture-card-preview
      custom-class="demo-drawer"
    >
<<<<<<< HEAD
      <!--标签页  -->
      <el-tabs v-model="activeName" class="tabs">
        <el-tab-pane label="用户管理" name="first">
          <!--  用户管理--表单-->
          <el-form
            ref="formInline"
            :inline="true"
            :model="formInline"
            :rules="rules"
            class="demo-form-inline"
          >
            <el-form-item label="小区名称" prop="name">
              <el-input
                v-model="formInline.name"
                class="form-inline-input"
                placeholder="审批人"
              />
            </el-form-item>
            <el-form-item label="坐落地址" prop="address">
              <el-input
                v-model="formInline.address"
                placeholder="审批人"
              />
            </el-form-item>
            <el-form-item label="占地面积" prop="area">
              <el-input
                v-model="formInline.area"
                placeholder="审批人"
              />
            </el-form-item>
            <el-form-item label="开发商名称" prop="developer">
              <el-input
                v-model="formInline.developer"
                placeholder="审批人"
              />
            </el-form-item>
            <!-- 第三行 -->
            <el-form-item label="物业公司名称" prop="estate">
              <el-input
                v-model="formInline.estate"
                placeholder="审批人"
              />
            </el-form-item>
            <el-form-item label="绿化率" prop="greening_rate">
              <el-input
                v-model="formInline.greening_rate"
                placeholder="审批人"
              />
            </el-form-item>
            <!-- 第四行 -->
            <el-form-item label="总栋数" prop="total_building">
              <el-input
                v-model.number="formInline.total_building"
                placeholder="审批人"
              />
            </el-form-item>
            <el-form-item label="总户数" prop="total_owner">
              <el-input
                v-model.number="formInline.total_owner"
                placeholder="审批人"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!--  用户管理--表单-->
        <!-- 详细信息 -->
        <el-tab-pane label="配置管理" name="second">
          <el-form
            :inline="true"
            :model="formInline"
            :rules="rules"
            class="demo-form-inline"
          >
            <!--  -->
            <span style="display: flex; margin-bottom: 30px">
              <div>小区图片</div>
              <!-- <el-upload
=======
      <el-row>
        <el-col :span="24">
          <!--标签页  -->
          <el-tabs v-model="activeName" class="tabs">
            <el-tab-pane label="用户管理" name="first">
              <!--  用户管理--表单-->
              <el-form
                ref="formInline"
                :inline="true"
                :model="formInline"
                :rules="rules"
                class="demo-form-inline"
              >
                <el-form-item label="小区名称" prop="name">
                  <el-input
                    v-model="formInline.name"
                    class="form-inline-input"
                    placeholder="审批人"
                  />
                </el-form-item>
                <el-form-item label="坐落地址" prop="address">
                  <el-input
                    v-model="formInline.address"
                    placeholder="审批人"
                  />
                </el-form-item>
                <el-form-item label="占地面积" prop="area">
                  <el-input
                    v-model="formInline.area"
                    placeholder="审批人"
                  />
                </el-form-item>
                <el-form-item label="开发商名称" prop="developer">
                  <el-input
                    v-model="formInline.developer"
                    placeholder="审批人"
                  />
                </el-form-item>
                <!-- 第三行 -->
                <el-form-item label="物业公司名称" prop="estate">
                  <el-input
                    v-model="formInline.estate"
                    placeholder="审批人"
                  />
                </el-form-item>
                <el-form-item label="绿化率" prop="greening_rate">
                  <el-input
                    v-model="formInline.greening_rate"
                    placeholder="审批人"
                  />
                </el-form-item>
                <!-- 第四行 -->
                <el-form-item label="总栋数" prop="total_building">
                  <el-input
                    v-model.number="formInline.total_building"
                    placeholder="审批人"
                  />
                </el-form-item>
                <el-form-item label="总户数" prop="total_owner">
                  <el-input
                    v-model.number="formInline.total_owner"
                    placeholder="审批人"
                  />
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <!--  用户管理--表单-->
            <!-- 详细信息 -->
            <el-tab-pane label="配置管理" name="second">
              <el-form
                :inline="true"
                :model="formInline"
                :rules="rules"
                class="demo-form-inline"
              >
                <!--  -->
                <span style="display: flex; margin-bottom: 30px">
                  <div>小区图片</div>
                  <!-- <el-upload
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
                :limit="3"
                class="avatar-uploader"
                v-model="formInline.thumb"
                style="margin-right: 100px"
                action="#"
                list-type="picture"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :http-request="httpRequest"
                :file-list="fileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload> -->
<<<<<<< HEAD
              <el-upload
                :limit="3"
                action="#"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :http-request="httpRequest"
                :file-list="fileList"
              >
                <i class="el-icon-plus" />
              </el-upload>

              <!-- </el-form-item> -->
              <!-- 经纬度 -->
              <el-form-item label="经纬度" prop="position">
                <el-input
                  :value="positionInfo"
                  placeholder="请输入内容"
                  disabled
                />
                <el-dialog
                  :title="title"
                  :visible.sync="isShow"
                  @closed="isShow = false"
                >
                  <gdMap
                    :position="position"
                    @getPosition="getPosition"
                  />
                </el-dialog>
                <el-button type="primary" @click="isShow = true">
                  点击获取</el-button>
              </el-form-item>
            </span>
            <!--  详细描述-->
            <!-- 详细信息 -->
            <el-form-item label="" prop="introduction">
              <span> 详细信息</span>
              <quillEditor v-model="formInline.introduction" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
=======
                  <el-upload
                    :limit="3"
                    action="#"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :http-request="httpRequest"
                    :file-list="fileList"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>

                  <!-- </el-form-item> -->
                  <!-- 经纬度 -->
                  <el-form-item label="经纬度" prop="position">
                    <el-input
                      :value="positionInfo"
                      placeholder="请输入内容"
                      disabled
                    />
                    <el-dialog
                      :title="title"
                      :visible.sync="isShow"
                      @closed="isShow = false"
                    >
                      <gdMap
                        :position="position"
                        @getPosition="getPosition"
                      />
                    </el-dialog>
                    <el-button type="primary" @click="isShow = true">
                      点击获取</el-button>
                  </el-form-item>
                </span>
                <!--  详细描述-->
                <!-- 详细信息 -->
                <el-form-item label="" prop="introduction">
                  <span> 详细信息</span>
                  <quillEditor v-model="formInline.introduction" />
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad

      <!--  取消 确认-->
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="editOk">{{
          loading ? "提交中 ..." : "确 定"
        }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import gdMap from '@/components/gd-map'
import { quillEditor } from 'vue-quill-editor'
import {
  getCommunityListApi,
  getCommunityDeatilApi,
  editCommunityDeatilApi,
  delCommunityDeatilApi,
  SearchCommunityListApi,
  addommunityApi,
  upImage
} from '@/api/community'

export default {
  name: 'CommunityIndex',
  components: { quillEditor, gdMap },
  data() {
    return {
      positionInfo: '',
      position: [117.330276, 31.860956], // 默认坐标信息
      title: '获取坐标',
      isShow: false,

      thumb: [], // 图片
      srcList: [],
      fileList: [],
      id: null,
      // 搜索 表单
      formData: {
        name: '',
        developer: '',
        estate: '',
        create_time: '' // 时间
      },
      rules: {
        name: [
          {
            required: true,
            message: '小区名称不为空且检查类型',
            trigger: 'blur'
          }
        ],
        address: [
          { required: true, message: '地址不为空且检查类型', trigger: 'blur' }
        ],
        area: [
          {
            required: true,
            message: '占地面积不为空且检查类型',
            trigger: 'blur'
          }
        ],
        developer: [
          {
            required: true,
            message: '开发商名称不为空且检查类型',
            trigger: 'blur'
          }
        ],
        estate: [
          {
            required: true,
            message: '物业公司不为空且检查类型',
            trigger: 'blur'
          }
        ],
        greening_rate: [
          {
            required: true,
            message: '绿化率不为空且检查类型',
            trigger: 'blur'
          }
        ],
        total_building: [
          {
            required: true,
            message: '总栋数不为空且检查类型',
            trigger: 'blur'
          }
        ],
        addtotal_ownerress: [
          {
            required: true,
            message: '总户数不为空且检查类型',
            trigger: 'blur'
          }
        ],

        position: [
          {
            // required: true,
            // message: "",
            // trigger: "change",
          }
        ]
      },
      // 表格
      tableData: [],
      timeCreate: [],
      offset: 12,
      // 总页数
      count: 0,
      currentPage: 1, // 当前页数
      // 获取表格数据的传参
      table: {
        current: 1,
        pageSize: 10,
        create_time: ''
      },
      // 抽屉的
      loading: false,
      dialog: false, // 抽屉的开关
      activeName: 'first', // 标签页
      formInline: {
        // 抽屉数据
        address: '',
        area: '',
        developer: '',
        estate: '',
        greening_rate: '',

        name: '',
        total_building: 0,
        total_owner: 0,
        introduction: '',
        position: '',
        thumb: ''
      }
    }
  },

  created() {
    // 获取表单数据
    this.getTableList()
  },
  mounted() {},
  methods: {
    mapClose() {
<<<<<<< HEAD
      console.log('mapClose')
=======
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      this.positionInfo = []
      this.isShow = false
    },
    // 获取坐标
    getPosition(e) {
<<<<<<< HEAD
      // console.log('getPosition')
      this.positionInfo = e.toString()
      this.formInline.position = e.toString()
=======
      console.log(e)
      this.positionInfo = e.toString()
      // console.log(this.positionInfo);
      this.formInline.position = e.toString()
      // console.log("坐标信息", this.formInline.position);
      // this.positionInfo = e;
      // this;
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
    },
    // 处理图片显示
    showImgUrl(url) {
<<<<<<< HEAD
      // console.log('图片')
      const srcLists = []
      if (url) {
        if (url.includes(',')) {
          // url.split(',').map(item => `http://124.223.14.236:8881${item}`)
          return url.split(',').map(item => `http://124.223.14.236:8881${item}`)
        } else {
          srcLists.push(`http://124.223.14.236:8881${url}`)
          return srcLists
        }
      } else {
        srcLists.push('http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png')
        return srcLists
=======
      this.srcList = []
      if (url.length === 0) {
        this.srcList.push(
          'http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png'
        )
        return 'http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png'
      } else if (url.length > 1) {
        this.thumb = url.split(',')
        this.srcList = url.split(',').map((item) => {
          // console.log("http://124.223.14.236:8881", item);
          return 'http://124.223.14.236:8881' + item
        })
        return 'http://124.223.14.236:8881' + this.thumb[0]
      } else {
        return 'http://124.223.14.236:8881' + url
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      }
    },
    // 图片
    async httpRequest(result) {
<<<<<<< HEAD
      // console.log('httpRequest图片')
=======
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      const fd = new FormData()
      fd.append('file', result.file)
      const res = await upImage(fd)
      this.formInline.thumb = res.data.data.url
    },
    // 重置搜索表单
    resetting() {
<<<<<<< HEAD
      // console.log('表单重置')
=======
      console.log('表单重置')
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      // 表单置空
      this.formData = {
        name: '',
        developer: '',
        estate: '',
        create_time: '' // 时间
      }
      this.timeCreate = []
      // 表格数据刷新
      this.getTableList()
    },
    // 刷新
    refresh() {
<<<<<<< HEAD
      // console.log('刷新')
=======
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      // 重置搜索表单
      // 重置表格数据
      this.getTableList()
      this.$message('刷新成功')
    },
    // 搜索
    async searchSubmit() {
      // console.log('搜索')
      // console.log(this.timeCreate.toString());
      this.formData.create_time = this.timeCreate
        .map((item) => +new Date(item))
        .toString()
      const res = await SearchCommunityListApi(this.formData)
      this.tableData = res.data.data
    },
    // 刷新  获取表格数据
    async getTableList() {
<<<<<<< HEAD
      // console.log(' 刷新  获取表格数据')
=======
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      const res = await getCommunityListApi(this.table)
      this.count = res.data.data.count
      // console.log("总数", this.count);
      this.tableData = res.data.data.rows
<<<<<<< HEAD
      // console.log(this.tableData)
    },
    // 编辑
    async edit(id) {
      console.log('编辑')
=======

      console.log(this.tableData)
    },
    // 编辑
    async edit(id) {
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      this.id = id
      // 打开弹窗
      this.dialog = true
      const res = await getCommunityDeatilApi(id)
      // console.log("11", res.data.data);
      this.formInline = res.data.data
      this.fileList = res.data.data.thumb
        ? [{ url: 'http://124.223.14.236:8881' + res.data.data.thumb }]
        : [
          {
            url: 'http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png'
          }
        ]
      this.positionInfo = res.data.data.position
      console.log(this.position)
    },
    // 关闭抽屉
    cancelForm() {
      console.log('关闭抽屉')
      // 清空坐标
      this.positionInfo = []
      // 关闭弹窗
      this.dialog = false
      // 表单置空
      this.formInline = {
        // 抽屉数据
        address: '',
        area: '',
        developer: '',
        estate: '',
        greening_rate: '',
        id: null,
        name: '',
        total_building: null,
        total_owner: null,
        introduction: '',
        position: ''
      }
      this.fileList = []
    },
    // 确定编辑
    async editOk() {
<<<<<<< HEAD
      console.log('确定编辑')
=======
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      await this.$refs.formInline.validate()
      if (this.formInline.id) {
        // 有ID是修改
        console.log(this.formInline)
        await editCommunityDeatilApi(this.formInline)
        this.$message('编辑成功')
      } else {
        await addommunityApi(this.formInline)
      }
      // 提示
      this.getTableList()
      window.location.reload()

      this.$message('操作成功')
      // 关闭弹窗
      this.this.dialog = false
      // 刷新数据
    },
    // 新增小区
    async addCom() {
<<<<<<< HEAD
      console.log('新增小区')
=======
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      this.fileList = []
      // this.position = [];
      this.formInline = {
        // 抽屉数据
        address: '',
        area: '',
        developer: '',
        estate: '',
        greening_rate: '',

        name: '',
        total_building: 0,
        total_owner: 0,
        introduction: '',
        position: '',
        thumb: ''
      }
      this.dialog = true
    },

    // 删除小区
    async del(id) {
<<<<<<< HEAD
      console.log('删除小区')
=======
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      await this.$confirm('确认删除吗？')
      // console.log("确定删除");
      await delCommunityDeatilApi(id)
      this.getTableList()
      window.location.reload()
      this.$message('删除成功')
      // 刷新数据
    },
    // 切换分页
    changeCurrent(val) {
<<<<<<< HEAD
      console.log('切换分页')
=======
      console.log(val)
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
      this.table.current = val
      // this.table.pageSize =
      this.getTableList()
    },
    changeSize(val) {
<<<<<<< HEAD
      console.log('val')
=======
      console.log(val)
>>>>>>> 38bc6206e303a9fac6524b00ceb290500a01e7ad
    }
  }
}
</script>
<style lang="scss" scoped>
.contanter {
  padding: 20px;
}
.two {
  margin-top: 20px;
}
.searchForm {
  .search {
    flex-wrap: wrap;
    .el-col {
      padding: 0 10px;
    }
    .right-btn {
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      .botn {
        display: flex;
        align-items: flex-end;
        height: 100%;
        .el-button {
          display: block;
          margin-top: 5px;
          margin-left: 0;
          margin-right: 0;
        }
      }
      .packup {
        cursor: pointer;
        color: #1890ff;
      }
    }
  }
}
.block {
  float: right;
  display: flex;
  margin: 20px;
}
.demonstration {
  display: flex;
  align-items: center;
}
.tabs {
  margin: 30px;
}
.demo-drawer__footer {
  float: right;
}
.form-inline-input {
  height: 30px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
